
.ka{
    width:500px;
    background:rgba(255,255,255,1);
    .circle{
        z-index: 999;
        width:200px;
        height: 200px;
        border-radius: 50%;
        background:rgba(255,255,255,1);
        margin:-110px auto 0;
        overflow: hidden;
        span{
            background-image: url(../../dist/img/3img_qd_success.png);
            background-size: cover;
            display: block;
            width:86px;
            height: 92px;
            border-radius: 50%;
            margin:20px auto;
        }
    }
    .x{
        padding-right:20px;
        margin-top: -73px;
        margin-bottom: 28px;
        // cursor: pointer;
        span{
            width:24px;
            height: 24px;
            background: url(../../dist/img/3icon05.png);
            background-size: cover;
            display: block;
            float: right;
            
        }

    }
    .word{
        color:rgba(51,51,51,1);
        font-size: 20px;
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 1px dashed rgba(231,76,60,1);
    }
    .con{
        color:rgba(231,76,60,1);
        padding:50px 0 40px;
        font-size:24px;
        text-align: center;
    }
    .di{
        color:rgba(102,102,102,1);
        font-size:15px;
        margin-bottom: 30px;
        text-align: center;
    }
}
.content{
    .main{
        display: flex;
        .left{
            width:458px;
            background:rgba(252,252,254,1);
            border:1px solid rgba(229,229,229,1);
            margin-right:16px;
            position: relative;
            background-size: 100%;
            max-height: 638px;
            img{
                display: block;
                width:100%;
                height: 100%;
            }
            .people{
                margin:35px auto 54px;
                width:164px; 
                height: 489px;
                background-repeat: no-repeat;
                .head{
                    li{
                        width:48px;
                        height: 66px;
                        margin: 0 auto ;
                        // cursor: pointer;
                    
                    }
                }
                .jingbu{
                    li{
                        margin:-10px auto 0;
                        width: 95px;
                        height: 37px;
                        // cursor: pointer;
                    }
                }
                .center{
                    position: relative;
                    width:164px;
                    height: 224px;
                    .hand,li{
                        width:100%;
                        height: 100%;
                        // cursor: pointer;
                        
                    }
                    .xiong{
                        width: 90px;
                        height: 62px;
                       
                        position: absolute;
                        left:38px;
                        top:-3px;
                        // cursor: pointer;
                    }
                    .fubu{
                        width: 76px;
                        height: 76px;
                        position: absolute;
                        left:47px;
                        
                        top:50px;
                        // cursor: pointer;
                    }
                    .bird{
                        width: 91px;
                        height: 48px;
                        position: absolute;
                        left:40px;
                       
                        bottom: 49px;
                        // cursor: pointer;
                    }
                
                }
                .foot{
                    width:93px;
                    height: 235px;
                    margin-left:40px;
                    margin-top:-57px;
                    position: relative;
                    z-index: 999;
                    li{
                        width:100%;
                        height:100%;
                        // cursor: pointer;
                    }
                }
                &.man {
                    background-image: url(../img/manfan/img_nanzheng.png);
                    background-size: contain;
                    
                
                }
                &.fan{
                    .hand,.fubu{
                        pointer-events: none;
                        display: none;
                    }
                    .foot{
                        pointer-events: none;
                    }
                    .xiong{
                        height:178px;    
                    }
                }
                &.man.fan{
                    background-image: url(../img/manfan/img_nanbei.png);
                    background-size: contain;
    
                }
                &.nv {
                    background-image: url(../img/manfan/ing_nvzheng.png);
                    background-size: contain;
                }
                &.nv.fan{
                    background-image: url(../img/manfan/img_nvbei.png);
                    background-size: contain;
                }
                
            }
            .btns{
                width:66px;
                position: absolute;
                bottom: 111px;
                right: 39px;
                // cursor: pointer;
                .word{
                    display: block;
                    width:100%;
                    font-size: 14px;
                    text-align: center;
                    color:rgba(102,102,102,1);
                }
                .btn1{
                    margin-bottom: 34px;
                    li{
                        width:32px;
                        height:32px;
                        border-radius: 50%;
                        margin: 0 auto 11px;
                        background: url(../img/manfan/icon_switch.png) no-repeat;
                        background-size: cover;
                    } 
                }
                .btn2{
                    span:nth-of-type(1){
                        width:100%;
                        display: block;
                        height: 28px;
                        margin-bottom: 10px;
                        background-image: url(../img/manfan/icon01.png);
                        background-size: cover;
                        i{
                            width:33px;
                            height: 28px;
                            float: left;
    
                        }
                        &.nv{
                            background: url(../img/manfan/icon02.png);
                            background-size: cover;
                        }
                    }
                
                
                }
            }
            .down{
                box-sizing: border-box;
                padding:10px 85px 0 35px;
                height:56px;
                line-height: 20px;
                font-size: 12px;
                background:rgba(242,253,252,1);
                color:rgba(85,85,85,1);

            }
        }
        .right{
            background:rgba(252,252,254,1);
            flex: 1;
            border:1px solid rgba(229,229,229,1);
            .r{
                display: flex;
                height:48px;
                box-sizing: border-box;
                padding:15px 15px 16px;
                .f-left{
                    font-size: 14px;
                    line-height: 16px;
                    height: 16px;
                    padding-left:10px;
                    border-left:4px solid rgba(95,169,229,1);
                    flex: 1;
                }
            }
            .first{
            
                background:rgba(234,248,255,1);
                .r-right{
                    display: flex;
                    .btn{
                        display: flex;
                        .circle{
                            display: block;
                            width:16px;
                            height: 16px;
                            margin-right:7px;
                            border:1px solid #999;
                            border-radius: 50%;
                        }
                        .on{
                            background-image: url(../img/3icon06.png);
                            background-size: cover;
                            border: 0;
                        }
                        .sex{
                            display: block;
                            font-size: 14px;
                            line-height: 16px;
                            color:rgba(153,153,153,1);
                            margin-right:20px;
                        }
                        .girle{
                            margin-right: 0;
                        }
                    }
                }
                
            }
            
            .second,
            .three {
                .buwei{
                    box-sizing: border-box;
                    padding:16px 0 4px;
                    .arr{
                        flex-wrap: wrap ;
                        width:456px;
                        margin: 0 auto;
                        span{
                            height: 20px;
                            width:90px;
                            color:rgba(102,102,102,1);
                            font-size: 12px;
                            line-height: 20px;
                            color:rgba(102,102,102,1);
                            text-align: center;
                            margin-bottom: 11px;
                            border-right:1px solid rgba(229,229,229,1);
                            &.on{
                                color:#6BA8EC;
                            }
                        }
                    
                    
                    }
                }
            }
            .second{
                background:#fff;
                .buwei{
                    background:rgba(239, 255, 251, 1);

                }
                .arr{
                    span:nth-of-type(5) {
                        border-right: 0;
                        padding-right: 0;
                    }
                    span:nth-of-type(10) {
                        border-right: 0;
                        padding-right: 0;
                    }
                    span:nth-last-of-type(1) {
                        border-right: 0;
                        padding-right: 0;
                    }

                }
                

            }
            .three{
                .t-right{
                    color:rgba(153,153,153,1);
                }
                .buwei{
                    background:rgba(254, 240, 255, 1);
                    .arr{
                        span {
                            border: 0;
                        }
                    }
                    
                }
            }
            .four{
                .buwei{
                    background:rgba(255,252,238,1);
                    padding:0 81px 0px 65px;
                    overflow: hidden;
                    border-top: 1px solid rgba(229,229,229,1);
                    border-bottom: 1px solid rgba(229,229,229,1);
                    .buwei1{
                        box-sizing: border-box;
                        flex-wrap: wrap ;
                        display: flex;
                        padding-top:20px;
                        span{
                            width: 50%;
                            height: 20px;
                            margin-bottom: 14px;
                            line-height: 20px;
                            box-sizing: border-box;
                            font-size: 12px;
                            border-right:1px solid rgba(229,229,229,1);
                            color:rgba(102,102,102,1);
                        
                        }
                        span:nth-of-type(2n){
                            border-right:0;
                            text-align: right;
                        
                        }
                    }

                }
            
            }
            .five{
                .bn{
                    display: inline-block;
                    float: right;
                    // cursor: pointer;
                    width:100px;
                    height:32px;
                    background:rgba(101,178,248,1);
                    border:1px solid rgba(229,229,229,1);
                    border-radius:5px;
                    margin-top:10px;
                    color:rgba(255,255,255,1);
                    font-size: 14px;
                    text-align: center;
                    line-height: 32px;
                    margin-bottom: 10px;
                    &.on{
                        background: #e5e5e5;
                    }
                }
                .bn1{
                    margin-left:10px;
                    margin-right:16px;
                }
            
            }
        }
    }

}

// @media screen and (min-width: 1400px){
//     .ka{
//         width:668px;
//         background:rgba(255,255,255,1);
//         top:490px;
    
//         .circle{
            
//             z-index: 999;
//             width:220px;
//             height: 220px;
//             border-radius: 50%;
//             background:rgba(255,255,255,1);
//             margin:-110px auto 0;
//             overflow: hidden;
//             span{
//                 background-image: url(../../dist/img/3img_qd_success.png);
//                 display: block;
//                 width:89px;
//                 height: 92px;
//                 border-radius: 50%;
//                 margin:20px auto;
//             }
//         }
//         .x{
//             padding-right:20px;
//             margin-top: -100px;
//             margin-bottom: 28px;
//             span{
//                 width:28px;
//                 height: 28px;
//                 background: url(../../dist/img/3icon05.png);
//                 display: block;
//                 float: right;
                
//             }

//         }
//         .word{
//             color:rgba(51,51,51,1);
//             font-size: 28px;
//             text-align: center;
//             padding-bottom: 10px;
//             border-bottom: 1px dashed rgba(231,76,60,1);
//         }
//         .con{
//             color:rgba(231,76,60,1);
//             padding:94px 0 114px;
//             font-size:46px;
//             text-align: center;
//         }
//         .di{
//             color:rgba(102,102,102,1);
//             font-size: 20px;
//             margin-bottom: 57px;
//             text-align: center;
//         }
//     }
//     .content{
//         .main{
//             display: flex;
//             .left{
//                 width:560px;
//                 background:rgba(252,252,254,1);
//                 border:1px solid rgba(229,229,229,1);
//                 position: relative;
//                 background-size: 100%;
//                 max-height: 778px;
//                 img{
//                     display: block;
//                     width:100%;
//                     height: 100%;
//                 }
//                 .people{
//                     margin-left:180px;
//                     margin-right:180px;
//                     margin-bottom: 63px;
//                     margin-top:44px;
//                     width:200px; 
                   
//                     background-position: center;
//                     // background-size: 100%;
//                     background-repeat: no-repeat;
//                     .head{
//                         li{
//                             width:57px;
//                             height: 79px;
//                             margin-top: 20px;
//                             margin-left:72px;
//                         }
//                     }
//                     .jingbu{
//                         width:200px;
//                         li{
//                             margin-left:40px;
//                             margin-top:-15px;
//                             width: 115px;
//                             height: 44px;
//                         }
//                     }
//                     .center{
//                         position: relative;
//                         width:200px;
//                         height: 273px;
//                         margin-top:-26px;
//                         .hand,li{
//                             width:100%;
//                             height: 100%;
                            
//                         }
//                         .xiong{
//                             width: 124px;
//                             height: 75px;
//                             position: absolute;
//                             left:38px;
//                             top:21px;
//                         }
//                         .fubu{
//                             width: 106px;
//                             height: 103px;
//                             position: absolute;
//                             left:47px;
//                             top:89px;
//                         }
//                         .bird{
//                             width: 110px;
//                             height: 58px;
//                             position: absolute;
//                             left:45px;
//                             bottom: 30px;
//                         }
                    
//                     }
//                     .foot{
//                         width:112px;
//                         height: 287px;
//                         margin-left:44px;
//                         margin-top:-43px;
//                         li{
//                             width:100%;
//                             height:100%;
//                         }
//                     }
//                     &.man {
//                         background-image: url(../img/manfan/img_nanzheng.png);
                        
                    
//                     }
//                     &.fan{
//                         .hand,.fubu{
//                             pointer-events: none;
//                             display: none;
//                         }
//                         .foot{
//                             pointer-events: none;
//                         }
//                         .xiong{
//                             height:178px;    
//                         }
//                     }
//                     &.man.fan{
//                         background-image: url(../img/manfan/img_nanbei.png);
        
//                     }
//                     &.nv {
//                         background-image: url(../img/manfan/ing_nvzheng.png);
//                     }
//                     &.nv.fan{
//                         background-image: url(../img/manfan/img_nvbei.png);
//                     }
                    
//                 }
//                 .btns{
//                     width:96px;
//                     position: absolute;
//                     bottom: 133px;
//                     right: 39px;
//                     .word{
//                         display: block;
//                         width:100%;
//                         font-size: 16px;
//                         text-align: center;
//                         color:rgba(102,102,102,1);
//                     }
//                     .btn1{
//                         margin-bottom: 38px;
//                         li{
//                             width:40px;
//                             height:40px;
//                             border-radius: 50%;
//                             margin: 0 auto 13px;
//                             background: url(../img/manfan/icon_switch.png) no-repeat;
//                         } 
//                     }
//                     .btn2{
//                         span:nth-of-type(1){
//                             width:100%;
//                             display: block;
//                             height: 40px;
//                             margin-bottom: 10px;
//                             background-image: url(../img/manfan/icon01.png);
//                             i{
//                                 width:48px;
//                                 height: 40px;
//                                 float: left;
        
//                             }
//                             &.nv{
//                                 background: url(../img/manfan/icon02.png)
//                             }
//                         }
                    
                    
//                     }
//                 }
//                 .down{
//                     box-sizing: border-box;
//                     padding:10px 65px 0 45px;
//                     height:68px;
//                     line-height: 26px;
//                     font-size: 16px;
//                     background:rgba(242,253,252,1);
//                     color:rgba(85,85,85,1);

//                 }
//             }
//             .right{
//                 width:620px;
//                 background:rgba(252,252,254,1);
//                 border:1px solid rgba(229,229,229,1);
//                 .r{
//                     display: flex;
//                     height:58px;
//                     box-sizing: border-box;
//                     padding:20px 19px;
//                     .f-left{
//                         font-size: 16px;
//                         line-height: 1;
//                         padding-left:10px;
//                         border-left:4px solid rgba(95,169,229,1);
//                         flex: 1;
//                     }
//                 }
//                 .first{
                
//                     background:rgba(234,248,255,1);
//                     .r-right{
//                         display: flex;
//                         .btn{
//                             display: flex;
//                             .circle{
//                                 display: block;
//                                 width:18px;
//                                 height: 18px;
//                                 margin-right:10px;
//                                 border:1px solid #999;
//                                 border-radius: 50%;
//                             }
//                             .on{
//                                 background-image: url(../img/3icon06.png);
//                                 border: 0;
//                             }
//                             .sex{
//                                 display: block;
//                                 font-size: 16px;
//                                 line-height: 1;
//                                 color:rgba(153,153,153,1);
//                                 margin-right:10px;
//                             }
//                         }
//                     }
                    
//                 }
//                 .second,
//                 .three {
//                     .buwei{
//                         box-sizing: border-box;
//                         padding:15px 0 2px;
//                         .arr{
//                             flex-wrap: wrap ;
//                             width:550px;
//                             margin: 0 auto;
//                             span{
//                                 height: 26px;
//                                 width:109px;
//                                 color:rgba(102,102,102,1);
//                                 font-size: 14px;
//                                 line-height: 24px;
//                                 color:rgba(102,102,102,1);
//                                 text-align: center;
//                                 margin-bottom: 12px;
//                                 border-right:1px solid rgba(229,229,229,1);
//                                 &.on{
//                                     color:#6BA8EC;
//                                 }
//                             }
                        
                        
//                         }
//                     }
//                 }
//                 .second{
//                     background:#fff;
//                     .buwei{
//                         background:rgba(239, 255, 251, 1);

//                     }
//                     .arr{
//                         span:nth-of-type(5) {
//                             border-right: 0;
//                             padding-right: 0;
//                         }
//                         span:nth-of-type(10) {
//                             border-right: 0;
//                             padding-right: 0;
//                         }
//                         span:nth-last-of-type(1) {
//                             border-right: 0;
//                             padding-right: 0;
//                         }

//                     }
                   

//                 }
//                 .three{
//                     .t-right{
//                         color:rgba(153,153,153,1);
//                     }
//                     .buwei{
//                         background:rgba(254, 240, 255, 1);
//                         .arr{
//                             span {
//                                 border: 0;
//                             }
//                         }
                        
//                     }
//                 }
//                 .four{
//                     .buwei{
//                         background:rgba(255,252,238,1);
//                         padding:0 98px 22px 78px;
//                         overflow: hidden;
//                         .buwei1{
//                             box-sizing: border-box;
//                             flex-wrap: wrap ;
//                             display: flex;
//                             padding-top:25px;

//                             span{
//                                 width: 50%;
//                                 height: 26px;
//                                 margin-bottom: 17px;
//                                 line-height: 26px;
//                                 box-sizing: border-box;
//                                 font-size: 14px;
//                                 border-right:1px solid rgba(229,229,229,1);
//                                 color:rgba(102,102,102,1);
                            
//                             }
//                             span:nth-of-type(2n){
//                                 border-right:0;
//                                 text-align: right;
                            
//                             }
//                         }

//                     }
                
//                 }
//                 .five{
//                     .bn{
//                         display: inline-block;
//                         float: right;
//                         width:120px;
//                         height:40px;
//                         background:rgba(101,178,248,1);
//                         border:1px solid rgba(229,229,229,1);
//                         border-radius:5px;
//                         margin-top:13px;
//                         color:rgba(255,255,255,1);
//                         font-size: 16px;
//                         text-align: center;
//                         line-height: 40px;
//                         margin-bottom: 13px;
//                         &.on{
//                             background: #e5e5e5;
//                         }
//                     }
//                     .bn1{
//                         margin-left:11px;
//                         margin-right:40px;
//                     }
                
//                 }
//             }
//         }

//     }
// }